// tinymce.init({
// 你需要将页面中的哪个元素替换为富文本编辑器
// selector: 'textarea' // 容器，可使用css选择器
// })

// 上述配置，是将多行文本框替换为富文本编辑器
// 这个代码，已经封装到 ./assets/lib/tinymce/tinymce_setup.js 里面了，函数叫 initEditor()

initEditor();

// 页面处理，获取分类
axios.get("/my/category/list").then((res) => {
  let { status, data } = res.data;
  if (status === 0) {
    let str = "";
    data.forEach((item) => {
      str += `<option value='${item.id}'>${item.name}</option>`;
    });
    // 把option放到selecr中
    $("select[name=cate_id]").append(str); // html() 会覆盖select里面的所有代码，如果不想覆盖，则使用append
    // 更新渲染
    let form = layui.form;
    form.render("select");
  }
});

// -------------------------- 处理封面图片 -----------------
// 封面处理 - 初始的剪裁代码
// 1. 初始化剪裁
// 1.1) 初始化图片剪裁区
let $image = $("#image");
// 1.2) 裁剪选项
let options = {
  aspectRatio: 400 / 280,
  preview: ".img-preview",
};
// 1.3) 初始化裁剪区域
$image.cropper(options);

// 2. 点击 “选择封面” 能够选择图片
$('button:contains("选择封面")').click(function () {
  $("#file").trigger("click");
});

// 3. 图片切换的时候，更换剪裁区的图片
$("#file").change(function () {
  if (this.files.length > 0) {
    // 3.1) 找到文件对象
    var fileObj = this.files[0];
    // 3.2) 创建url
    var url = URL.createObjectURL(fileObj);
    // 3.3) 更换图片
    $image.cropper("replace", url);
  }
});

// -------------------- 表单提交，收集数据，ajax提交，完成添加 -----------------
$("form").on("submit", function (e) {
  e.preventDefault();
  let fd = new FormData(this); //this说的是DOM对象，${this}是jquery对象
  // 修改content
  fd.set("content", tinyMCE.activeEditor.getContent());
  // 对于图片来说，需要剪裁，剪裁之后，转成文件对象格式，追加到fd中
  let canvas = $image.cropper("getCroppedCanvas", { width: 400, height: 280 });
  // 把canvas转成文件对象格式
  canvas.toBlob(function (blob) {
    fd.append("cover_img", blob); // blob对象，追击到fd中之后，就会转为文件对象
    // 检测fd中有哪些数据
    // fd.forEach((item, index) => console.log(index, item));
    // ajax提交
    axios.post("/my/article/add", fd).then((res) => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 添加成功，跳转到 文章列表 页面
        location.href = "./list.html";
      }
    });
  });
});



